<template>

  <div class="user">
    <div class="postMaMa">
      <el-table
          size="small"
          stripe
          border
          :data="userLinkList"
          style="width: 70%">
        <el-table-column
            prop="data"
            label="原网址"
            width="500">
        </el-table-column>
        <el-table-column
            prop="id"
            label="短链接"
            width="300">
        </el-table-column>
        <el-table-column
            prop="num"
            label="访问次数">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
                size="mini"
                type="primary"
                @click="flag=true,showQrcode(scope.row)">展示二维码
            </el-button>
            <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <el-pagination
          :current-page="page.current"
          :page-size="page.size"
          layout="total,prev,pager,next,jumper"
          :total="page.total"
          @current-change="pagechange"
      >
      </el-pagination>
    </div>
    <div style="margin-top: 50px">
      <a href=""
         target="_blank"
         style="text-decoration: none;margin-left:60px"
         @click="exportsx">
        点我导出您的所有链接信息
      </a>
      <el-dialog :before-close="close" :close-on-click-modal="true" :title=this.show.id :visible="flag"
                 style="width: 600px;margin-left: 700px;margin-top: 100px">
        <vue-qr :text="this.show.path" :size="250" colorDark="#4169E1" colorLight="#fff"></vue-qr>
      </el-dialog>
    </div>
  </div>

</template>

<script>
import {Message} from "element-ui";

export default {
  name: 'User',
  data() {
    return {
      page: {
        size: 0,
        current: 1,
        total: 0,
      },
      flag: false,
      show: {
        id: '',
        path: '',
      },
      user: {
        name: '',
        id: '',
      },
      userLinkList: [],
    }
  },
  methods: {
    exportsx(){
      this.id= window.sessionStorage.getItem("id")
      window.open('http://www.xhxlcloud.com:8080/link/user/xlsx?id='+this.id)
    },
    close() {
      this.flag = false
    },
    showQrcode(data) {
      this.show.id = data.id;
      this.show.path = "http://www.xhxlcloud.com:8080/find/" + data.id;
    },

    init(){
      this.getRequest('/link/user/'+this.page.current).then(resp => {
        this.userLinkList=resp.data.records
        this.page.total=resp.data.total
        this.page.current=resp.data.current
        this.page.size=resp.data.size
      })
    },

    pagechange(val){
      this.page.current=val
      this.init()
    },

    handleDelete(data) {
      //这个data,name不用要
      this.$confirm('此操作将永久删除该[' + data.id + ']数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.postRequest('/link/delete?id=' + data.id).then(resp => {
          if (resp.message) {
            Message.error("删除成功")
            this.init();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
  },

  mounted() {
    this.init();
  }
}
</script>

<style scoped>

a::before{
  content: "";
  position: absolute;
  left: -5px;
  right: -5px;
  bottom: -5px;
  top: -5px;
  background: linear-gradient(90deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
  background-size: 400%;
  border-radius: 50px;
  filter:blur(10px);
  z-index: -1;
}

a {
  line-height: 70px;
  text-align: center;
  position: absolute;
  font-weight: 700;
  font-size:24px;
  background: linear-gradient(90deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
  background-size: 400%;
  height: 70px;
  width: 400px;
  border-radius: 50px;
  z-index: 1;
}

@keyframes sun {
  100%{
    background-position: -400% 0;
  }
}

a:hover::before{
  animation: sun 8s infinite;
}
a:hover {
  animation: sun 8s infinite;
}

.postMaMa {
  margin-top: 10px;
}

</style>
